import React, { Component } from 'react';
import {Map, Road} from '../../../src'
import {simpleMapStyle} from './mapstyle'

export default class App extends Component {
    render() {
        return <Map style={{height: '200px'}} mapStyle={simpleMapStyle} center={{lng: 105.403119, lat: 38.028658}} zoom='5'>
            <Road 
            // category={[1, 3, 1, 3, 3, 3, 3, 1, 1]} 
            // splitList={{
            //    1: '#00c1a8',
            //    2: 'yellow',
            //    3: '#ff5e47'
            //}} 
            color='rgba(0,255,0,0.7)' 
            bgColor="rgba(255,255,255,0.1)"
            arrowColor='rgba(255,0,0,0.7)'
            lineWidth={10} 
            roadPath={[
                "116.488838,39.911212,116.489818,39.911292,116.490838,39.911387",
                "116.490838,39.911387,116.491164,39.911424,116.491454,39.911463,116.491707,39.911499,116.491926,39.911536,116.492145,39.911582,116.492374,39.911637,116.492781,39.911755,116.493174,39.911884,116.493791,39.912089,116.494033,39.91217,116.494171,39.912216",
                "116.494171,39.912216,116.494771,39.912415,116.495098,39.912526,116.495156,39.912544,116.495428,39.912634,116.49559,39.912688,116.4958,39.912758,116.496114,39.912863,116.496263,39.912913,116.496354,39.912943,116.496514,39.912997,116.496613,39.913029,116.496777,39.913084",
                "116.496777,39.913084,116.496997,39.913158,116.497585,39.913355",
                "116.497585,39.913355,116.497732,39.913434,116.498083,39.913551,116.498295,39.913652,116.49836,39.913686,116.498457,39.913737,116.498528,39.913779,116.498601,39.913832,116.498694,39.913925,116.498763,39.914018,116.498811,39.914114,116.498817,39.914134,116.498848,39.914243,116.498865,39.914342,116.498871,39.914375,116.498884,39.914527,116.498879,39.914676,116.498871,39.91473,116.498858,39.91482,116.498842,39.914863,116.49881,39.914955,116.498736,39.915081,116.498631,39.915198,116.498495,39.915309,116.498321,39.915415,116.498089,39.915526,116.497796,39.915617,116.497515,39.915734,116.497409,39.915771,116.497312,39.915814,116.497199,39.915898,116.497065,39.916021,116.496761,39.916372",
                "116.496761,39.916372,116.49673,39.916463",
                "116.49673,39.916463,116.496729,39.916465,116.496689,39.916608,116.496668,39.916691",
                "116.496668,39.916691,116.496647,39.916774",
                "116.496647,39.916774,116.496604,39.916953,116.496585,39.917192,116.49654,39.917395,116.496522,39.917438,116.496496,39.917537"
            ]} 
            onClick={(index)=>{console.log(index)}}
            />
        </Map>
    }
}

